<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>后台管理</title>
    <link rel="stylesheet" href="../layui/css/layui.css" />
    <style>
        body {
            background-image: url('../images/background.jpeg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .admin-container {
            background-color: rgba(255, 255, 255, 0.9);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            width: 800px;
            max-width: 100%;
        }

        .admin-title {
            text-align: center;
            margin-bottom: 20px;
            font-size: 24px;
            color: #333;
        }

        .layui-form-label {
            width: 80px;
            color: #333;
            font-weight: 600;
        }

        .layui-input-inline {
            width: 200px;
        }

        .layui-btn {
            background-color: #009688;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        .layui-btn:hover {
            background-color: #00796b;
        }
    </style>
</head>

<body>
<div class="admin-container">
    <div class="admin-title">后台管理</div>
    <form class="layui-form" lay-filter="addUserForm">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" name="username" id="username" autocomplete="off" placeholder="用户名"
                       class="layui-input" lay-verify="username">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="password" name="password" id="password" autocomplete="off" placeholder="密码"
                       class="layui-input" lay-verify="password">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属单位</label>
            <div class="layui-input-inline">
                <select name="unitId" id="unitId" lay-verify="unitId">
                    <!-- 单位选项将通过 AJAX 动态加载 -->
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="addUserForm">添加用户</button>
            </div>
        </div>
    </form>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <a href="query_test.html" class="layui-btn layui-btn-normal">返回查询页面</a>
        </div>
    </div>
</div>

<script src="../layui/layui.js"></script>
<script>
    layui.use(['form', 'jquery'], function () {
        var form = layui.form,
            $ = layui.jquery;

        // 加载单位列表
        $.ajax({
            type: 'GET',
            url: 'http://59.110.144.74/user/units',
            dataType: 'json',
            success: function (units) {
                var select = $('#unitId');
                units.forEach(function (unit) {
                    select.append('<option value="' + unit.id + '">' + unit.unitName + '</option>');
                });
                form.render('select'); // 重新渲染表单
            },
            error: function (xhr, status, error) {
                console.error(error);
                layer.msg('加载单位列表失败');
            }
        });

        // 自定义验证规则
        form.verify({
            username: function (value, item) {
                if (!value) {
                    return '用户名不能为空';
                }
                if (!/^[a-zA-Z0-9_]{3,20}$/.test(value)) {
                    return '用户名长度应在3到20个字符之间，只能包含字母、数字和下划线';
                }
            },
            password: function (value, item) {
                if (!value) {
                    return '密码不能为空';
                }
                if (!/^[a-zA-Z0-9!@#$%^&*]{6,20}$/.test(value)) {
                    return '密码长度应在6到20个字符之间，只能包含字母、数字和特殊字符';
                }
            },
            unitId: function (value, item) {
                if (!value) {
                    return '请选择所属单位';
                }
            }
        });

        form.on('submit(addUserForm)', function (data) {
            var userData = data.field;

            // 打印发送的数据
            console.log('Sending Data:', JSON.stringify(userData));

            // 发送保存请求
            $.ajax({
                type: 'POST',
                url: 'http://59.110.144.74/user/add', // 添加用户的接口
                data: JSON.stringify(userData),
                contentType: 'application/json',
                success: function (res) {
                    console.log('添加成功:', res);
                    layer.msg('添加成功');
                },
                error: function (xhr, status, error) {
                    console.error('Error Status:', xhr.status);
                    console.error('Error Response:', xhr.responseText);
                    layer.msg('添加失败: ' + xhr.responseText);
                }
            });

            return false; // 阻止表单默认提交行为
        });
    });
</script>
</body>

</html>
